[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Space_Grotesk, DM_Sans } from "next/font/google" import "./globals.css" const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], display: "swap", variable: "--font-space-grotesk", }) const dmSans = DM_Sans({ subsets: ["latin"], display: "swap", variable: "--font-dm-sans", }) export const metadata: Metadata = { title: "Modern Marketplace", description: "A sophisticated marketplace with modern design", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/product-card.tsx" isEdit="true" isMerged="true" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Clock, ArrowRight } from "lucide-react" interface ServiceCardProps { title: string category: string price: string duration: string tags: string[] gradient?: string } export function ServiceCard({ title, category, price, duration, tags, gradient = "gradient-card" }: ServiceCardProps) { return ( {/* Tags */}

{tags.map((tag, index) => ( {tag} ))}

{/* Service Info */}

{title}

{category}

{duration}

{price}

{/* Actions */}

) } [V0_FILE]png:file="public/placeholder-svfa0.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/placeholder-qxkto.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/placeholder-2wm96.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/placeholder-a1ae7.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/creative-tablet-setup.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/creative-tablet-setup-cSLL0tiliKi4PipGsy5YReV7fFwTco.png" isMerged="true" [V0_FILE]png:file="public/premium-thin-bezel-monitor.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premium-thin-bezel-monitor-YPrlIiXC6GyqTIFj6oLhYU4b7V4oGx.png" isMerged="true" [V0_FILE]typescriptreact:file="components/marketplace-sidebar.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { User, Github, Linkedin, Twitter, Mail } from "lucide-react" import { useState, useRef } from "react" export function MarketplaceSidebar() { const [profileImage, setProfileImage] = useState(null) const [isDragOver, setIsDragOver] = useState(false) const fileInputRef = useRef(null) const handleDragOver = (e: React.DragEvent) => { e.preventDefault() setIsDragOver(true) } const handleDragLeave = (e: React.DragEvent) => { e.preventDefault() setIsDragOver(false) } const handleDrop = (e: React.DragEvent) => { e.preventDefault() setIsDragOver(false) const files = e.dataTransfer.files if (files.length > 0) { const file = files[0] if (file.type.startsWith("image/")) { const reader = new FileReader() reader.onload = (e) => { setProfileImage(e.target?.result as string) } reader.readAsDataURL(file) } } } const handleClick = () => { fileInputRef.current?.click() } const handleFileChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file && file.type.startsWith("image/")) { const reader = new FileReader() reader.onload = (e) => { setProfileImage(e.target?.result as string) } reader.readAsDataURL(file) } } return (

{/* Branding */}

my services •

{profileImage ? ( Profile

) : (

)}

{/* Main Heading */}

Expert consulting that delivers results

Professional consulting services designed to accelerate your business growth and digital transformation.

{/* Navigation */}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" import { MarketplaceSidebar } from "@/components/marketplace-sidebar" import { ServiceCard } from "@/components/product-card" const services = [ { title: "Discovery Call", category: "Strategy • Initial Consultation", price: "Free", duration: "30 mins", tags: ["Strategy", "Free", "Consultation"], gradient: "gradient-primary", }, { title: "Accelerator Call", category: "Growth • Business Strategy", price: "$300", duration: "60 mins", tags: ["Growth", "Strategy", "Premium"], gradient: "gradient-card", }, { title: "Masterclass Session", category: "Education • Deep Dive", price: "$2,500", duration: "3 hours", tags: ["Education", "Intensive", "Expert"], gradient: "gradient-primary", }, { title: "Speaking Engagement", category: "Events • Keynote", price: "$500", duration: "30 mins", tags: ["Speaking", "Events", "Keynote"], gradient: "gradient-card", }, { title: "Free AI Workflow", category: "Automation • Digital Resource", price: "Free", duration: "Download", tags: ["AI", "Workflow", "Free"], gradient: "gradient-primary", }, { title: "AI Art Download", category: "Creative • Digital Asset", price: "Free", duration: "Instant", tags: ["AI", "Creative", "Download"], gradient: "gradient-card", }, ] export default function MarketplacePage() { return (

{/* Static Sidebar */} {/* Scrollable Content Area */}

{/* Header */}

Featured Services

Discover our curated selection of consulting services

{/* Service Grid */}

{services.map((service, index) => ( ))}

) } [V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color tokens to match the modern marketplace design brief */ --background: oklch(0.145 0 0); /* Dark slate gray background */ --foreground: oklch(0.985 0 0); /* White text */ --card: oklch(0.97 0 0); /* Light gray for cards */ --card-foreground: oklch(0.145 0 0); /* Dark text on cards */ --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.145 0 0); /* Dark slate gray */ --primary-foreground: oklch(0.985 0 0); /* White */ --secondary: oklch(0.439 0 0); /* Slate gray */ --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.97 0 0); /* Light gray */ --muted-foreground: oklch(0.439 0 0); /* Slate gray */ --accent: oklch(0.646 0.222 330); /* Pink accent */ --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.439 0 0); /* Slate gray borders */ --input: oklch(0.97 0 0); --ring: oklch(0.646 0.222 330); /* Pink ring */ --chart-1: oklch(0.145 0 0); --chart-2: oklch(0.646 0.222 330); --chart-3: oklch(0.439 0 0); --chart-4: oklch(0.97 0 0); --chart-5: oklch(0.985 0 0); --radius: 0.5rem; --sidebar: oklch(0.145 0 0); /* Dark sidebar */ --sidebar-foreground: oklch(0.985 0 0); /* White sidebar text */ --sidebar-primary: oklch(0.646 0.222 330); /* Pink primary */ --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.646 0.222 330); /* Pink accent */ --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.439 0 0); --sidebar-ring: oklch(0.646 0.222 330); --font-dm-sans: "DM Sans", sans-serif; --font-space-grotesk: "Space Grotesk", sans-serif; } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.97 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.145 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.439 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.439 0 0); --accent: oklch(0.646 0.222 330); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.439 0 0); --input: oklch(0.97 0 0); --ring: oklch(0.646 0.222 330); --chart-1: oklch(0.145 0 0); --chart-2: oklch(0.646 0.222 330); --chart-3: oklch(0.439 0 0); --chart-4: oklch(0.97 0 0); --chart-5: oklch(0.985 0 0); --sidebar: oklch(0.145 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.646 0.222 330); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.646 0.222 330); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.439 0 0); --sidebar-ring: oklch(0.646 0.222 330); } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); /* Added custom gradient utilities for the marketplace design */ --gradient-primary: linear-gradient( 135deg, oklch(0.6 0.15 240) 0%, oklch(0.5 0.2 280) 50%, oklch(0.646 0.222 330) 100% ); --gradient-card: linear-gradient(135deg, oklch(0.2 0.05 240) 0%, oklch(0.15 0.08 280) 100%); /* Updated font family mappings to use the new fonts */ --font-sans: var(--font-dm-sans); --font-heading: var(--font-space-grotesk); --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } /* Toned down neon gradient vignette to be more subtle and casual */ body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 50; background: radial-gradient( ellipse at center, transparent 60%, oklch(0.646 0.222 330 / 0.03) 80%, oklch(0.646 0.222 330 / 0.06) 95%, oklch(0.646 0.222 330 / 0.08) 100% ); box-shadow: inset 0 0 150px oklch(0.646 0.222 330 / 0.04), inset 0 0 300px oklch(0.646 0.222 330 / 0.02); } /* Added custom gradient classes for marketplace cards */ .gradient-primary { background: var(--gradient-primary); } .gradient-card { background: var(--gradient-card); } /* Added heading font utility class */ .font-heading { font-family: var(--font-heading); } }

About

Tags

Share

About

Tags

Share

More from jerrod

More Templates Like This